<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="true"
    class="add-filter-dialog small-common-dialog-size"
    width="450px">
    <div @click.stop="() => {}">
      <Title title="添加快捷筛选" style="margin-bottom:10px;"/>
      <div class="main">
        <div class="flex-center mb-16">
          <span class="label">快捷筛选名称&nbsp;&nbsp;</span>
          <el-input v-model="name" class="width240" size="small" placeholder="请输入快捷筛选名称" />
        </div>
        <div class="flex-center">
          <span class="label">筛选项：</span>
          <el-tooltip v-if="formatData.length">
            <div slot="content" style="max-width: 240px;max-height: 200px;overflow: auto;">
              <div v-for="item in formatData" :key="item">{{ item }}</div>
            </div>
            <div class="ellipsisOne" style="max-width: 240px;color: #333;">{{ formatData.join('；') }}</div>
          </el-tooltip>
          <div v-else>--</div>
        </div>
        <div class="btn-row">
          <el-button :disabled="!formatData.length" class="ok-btn" type="primary" size="small" @click="toSave">保存</el-button>
          <el-button class="cancel-btn-style ok-btn" size="small" @click="handleClose">取消</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';

export default {
  components: {
    Title
  },
  props: {
    selectValueResult: {
      type: Array,
      default: () => []
    },
    getPresetFilter: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      name: '',
      dialogVisible: false
    };
  },
  computed: {
    formatData() {
      const arr = [];
      if (this.selectValueResult.length) {
        this.selectValueResult.forEach(item => {
          const name = item.isExcludeKey ? `${item.name}(不包含)` : item.name;
          const result = `${name}：${item.value}`;
          arr.push(result);
        });
      }
      return arr;
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    toSave: _.debounce(function() {
      this.$emit('save', this.name);
      this.$nextTick(() => {
        this.handleClose();
      });
    }, 500),
    handleClose() {
      this.dialogVisible = false;
      this.name = '';
    }
  }
};
</script>

<style lang="scss" scoped>
.add-filter-dialog {
  &::v-deep {
    .el-dialog__body {
      padding: 0;
    }
  }
  .btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
  }
  .label {
    width: 110px;
    color: #999;
    text-align: right;
    white-space: nowrap;
  }
  .width240 {
    width: 240px;
  }
  .mb-16 {
    margin-bottom: 16px;
  }
}
</style>

